<template>
  <!--  <h1>TRTC SDK version:{{ sdkVersion }}</h1>-->
  <div style="height: 200px" ref="cameraPreviewRef"></div>
  <p>
    <el-button @click="enterRoom()">进入房间</el-button>
  </p>
  <p>
    <el-button @click="startCamera()">启动本地摄像头采集和预览</el-button>
  </p>
  <p>
    <el-button @click="stopCamera()">停止本地摄像头采集和预览</el-button>
  </p>
  <p>
    <el-button @click="stopScreen()">停止屏幕分享</el-button>
  </p>
  <ScreenWindowPreviewer
    v-for="item in screenList"
    :key="item.sourceId"
    :data="item"
    @click="handleClick(item)"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import TRTCCloud, {
  TRTCParams,
  TRTCAppScene,
  Rect,
  TRTCScreenCaptureProperty,
  TRTCVideoEncParam,
  TRTCVideoResolution,
  TRTCVideoResolutionMode,
  TRTCVideoStreamType,
  TRTCScreenCaptureSourceInfo,
  TRTCAudioQuality
} from 'trtc-electron-sdk'
import genTestUserSig from '../debug/gen-test-user-sig'
import ScreenWindowPreviewer from '@/components/ScreenShareControl/ScreenWindowPreviewer.vue'
// import otherUser from './otherUser.vue'

const userId = 'test-user'
const roomId = 5055005
const sdkVersion: Ref<string> = ref('')
const cameraPreviewRef: Ref<HTMLDivElement | null> = ref(null)

const trtcCloud = TRTCCloud.getTRTCShareInstance()

const screenList: TRTCScreenCaptureSourceInfo[] =
  trtcCloud.getScreenCaptureSources(320, 180, 32, 32)
console.log(screenList, 'screenList')
/*启动本地摄像头采集和预览*/
function startCamera() {
  // 开启麦克风采集，并设置当前场景为：语音模式（高噪声抑制能力、强弱网络抗性）
  trtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualitySpeech)
  trtcCloud.startLocalPreview(cameraPreviewRef.value)
}

function stopCamera() {
  trtcCloud.stopLocalAudio()
  trtcCloud.stopLocalPreview()
}

function stopScreen() {
  trtcCloud.stopScreenCapture()
}
/*分享屏幕*/
function handleClick(item: TRTCScreenCaptureSourceInfo) {
  console.log(item)

  // https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/Rect.html
  const captureRect = new Rect(0, 0, 0, 0) // 指定捕获的区域
  // https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/TRTCScreenCaptureProperty.html
  const property = new TRTCScreenCaptureProperty(true, true, true, 0, 0, false)
  trtcCloud.selectScreenCaptureTarget(item, captureRect, property) // 选取分享目标

  // https://web.sdk.qcloud.com/trtc/electron/doc/zh-cn/trtc_electron_sdk/TRTCVideoEncParam.html
  const encParam = new TRTCVideoEncParam(
    TRTCVideoResolution.TRTCVideoResolution_1920_1080,
    TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape,
    15,
    2000,
    0,
    false
  )
  trtcCloud.startScreenCapture(
    cameraPreviewRef.value,
    TRTCVideoStreamType.TRTCVideoStreamTypeSub,
    encParam
  )
}

/*进入房间*/
const enterRoom = () => {
  const sdkInfo = genTestUserSig(userId)
  let param = new TRTCParams()
  param.sdkAppId = sdkInfo.sdkAppId
  param.userSig = sdkInfo.userSig
  param.roomId = roomId
  param.userId = userId
  trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneVideoCall)
}

function onUserSubStreamAvailable(userId: string, available: number) {
  // 监听 当房间里有一个用户启动了屏幕分享
  console.log('监听到房间里有一个用户启动了屏幕分享')
  if (available === 1) {
    trtcCloud.startRemoteView(
      userId,
      cameraPreviewRef.value,
      TRTCVideoStreamType.TRTCVideoStreamTypeSub
    )
  } else {
    trtcCloud.stopRemoteView(userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub)
  }
}

/*监听用户是否开启摄像头视频*/
function onUserVideoAvailable(userId: string, available: number) {
  console.log('监听用户是否开启摄像头视频')
  if (available === 1) {
    // 代表该路画面已经有可用的视频数据帧到达
    trtcCloud.startRemoteView(
      userId,
      cameraPreviewRef.value,
      TRTCVideoStreamType.TRTCVideoStreamTypeBig // 视频流类型，TRTCVideoStreamTypeBig：主路画面，一般用于摄像头；TRTCVideoStreamTypeSub：辅路画面，一般用于屏幕分享。
    )
  } else {
    trtcCloud.stopRemoteView(userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub)
  }
}

const registerEvent = () => {
  trtcCloud.on('onError', (errCode: number, errMsg: string) => {
    console.log(`App.vue onError:`, errCode, errMsg)
  })

  trtcCloud.on('onWarning', (code: number, msg: string, extra: any) => {
    console.log(`App.vue onWarning:`, code, msg, extra)
  })

  trtcCloud.on('onEnterRoom', (result: number) => {
    console.log(`App.vue onEnterRoom:`, result)
  })

  trtcCloud.on('onRemoteUserEnterRoom', (userId: string) => {
    console.log(`App.vue onRemoteUserEnterRoom:`, userId)
  })

  trtcCloud.on('onUserVideoAvailable', onUserVideoAvailable)

  trtcCloud.on('onUserSubStreamAvailable', onUserSubStreamAvailable)
}

onMounted(() => {
  registerEvent()
  sdkVersion.value = trtcCloud.getSDKVersion()
  enterRoom()
})
</script>
